<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>布局</title>
    <style>
        header{
            width: 800px;
            height: 150px;
            background-color: #bfa;
            margin: 0 auto;
        }

        main{
            width: 800px;
            height: 400px;
            background-color: tomato;
            margin: 10px auto;

        }

        main .menu{
            float: left;
            width: 150px;
            height: 100%;
            background-color: orange;

        }

        main .banner{
            float: left;
            width: 350px;
            height: 100%;
            background-color: #ff0;
        }

        main .goods{
            float: left;
            width: 150px;
            height: 100%;
            background-color: skyblue;
        }

        main .info{
            float: left;
            width: 150px;
            height: 100%;
            background-color: greenyellow;
        }

        footer{
            width: 800px;
            height: 150px;
            background-color: silver;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<!--头部-->
<header></header>
<!--主体-->
<main>
    <div class="menu">菜单</div>
    <div class="banner">轮播图</div>
    <div class="goods">商品</div>
    <div class="info">信息</div>
</main>
<!--底部-->
<footer></footer>
</body>
</html>